---
title: Étiquette
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Component to visually categorize or label content.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés  | Type     | Description                                                                                                                                                             |
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse | chaîne   | Nom facultatif pour un style supplémentaire                                                                                                                             |
| couleur     | chaîne   | Couleur de l'étiquette. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
| texte       | chaîne   | Le contenu de l'étiquette                                                                                                                                               |
| onClick     | fonction | Optional function called when a user clicks on the tag                                                                                                                  |

</Tab>

</Tabs>
